<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>elementUI 级联菜单 演示</title>
</head>
<body>
<div id="app">
	<el-cascader :options="options"></el-cascader>
</div>
<script>
	let data=[
		'中国,湖南,株洲,天元区',
		'中国,湖南,株洲,石峰区,响石岭街道,衫木塘社区',
		'中国,湖南,株洲,云龙区',
		'中国,湖南,长沙,岳麓区',
		'中国,湖南,长沙,雨花区',
		'中国,湖南,长沙,芙蓉区',
		'中国,陕西,西安,雁塔区',
		'中国,陕西,西安,高新区',
		'中国,陕西,西安,碑林区',
		'美国,加州,洛杉矶',
		'美国,加州,硅谷',
		'美国,纽约州,纽约'
	];
	
	let newData=data.map(o=>o.split(',').reverse());
	// newData=newData.map(x=>x.map(y=>({value:y,label:y,children[]})))
	newData=newData.map(x=>x.map(y=>({value:y,label:y,children:[]})));
	let showData=[];
	newData.forEach(x=>x.forEach((y,i,arr)=>{
		// i ? y.children=undefined:null
		//反复定义 太麻烦  直接去掉
		// i ? {}:y.children=undefined;
		i<arr.length-1 ? arr[i+1].children.push(y):showData.push(y);
	}))
	//递归函数
	function getNextTree(defaultData){
		let nextData=[];
		let existValue=[];
		defaultData.forEach((x,i,arr)=>{
			if(!existValue.includes(x.value)){
				existValue.push(x.value)
				let newArr=arr.filter(y=>y.value==x.value&&y!=x)
				//获取除开自己并且同值得对象兄弟
				newArr.forEach(z=>x.children=x.children.concat(z.children))
				//同值兄弟的 子类 连接到自己的 子类中
				nextData.push(x)
				
			}
		})
		return nextData;
	
	}
	//递归  函数调用它自己 获取子类 一层一层处理数据
	function getAllTree(oldData){
		let newData=getNextTree(oldData);
		newData.forEach(o=>{
			o.children=o.children.length ? getAllTree(o.children):undefined
		});
		return newData;
		
	};
	
	
	console.log(showData);
	
	
let app=new Vue({
	el:"#app",
	data:{
		// options:showData
		// options:nextData
		// options:getNextTree(showData)
		options:getAllTree(showData)
		
	},
		
});
</script>
</body>
<html>
